<template>
  <div class="login">
    <div class="logo">
      <img src="../../assets/ICO.jpg" alt="" />
    </div>

    <div class="biaodan">
      <van-form @submit="aaaa">
        <van-field
          placeholder="请输入手机号码"
          class="text"
          label="手机号码"
          :rules="userFormRules.mobile"
          label-class="any"
          v-model="formData.mobile"
        />

        <van-field
          v-model="formData.nameID"
          placeholder="8~16字母或数字"
          class="text"
          label="登录账户"
          label-class="any"
          :rules="userFormRules.username"
          show-error
          error-message=""
        />
        <van-field
          v-model="formData.password"
          name="密码"
          :type="passwordType"
          placeholder="6~12数字+字母组合"
          class="text"
          label="登录密码"
          label-class="any"
          :rules="userFormRules.password"
          show-error
        >
          <template #button>
            <span native-type="button" @click="isShow">
              <img
                v-if="passwordType == 'password'"
                src="~@/assets/svg/psdNo.svg"
              />
              <img v-else src="~@/assets/svg/psdYes.svg" />
            </span>
          </template>
        </van-field>
        <van-field
          v-model="okPassword"
          name="validator"
          :type="passwordOKType"
          placeholder="请再次输入登录密码"
          class="text"
          label="确认密码"
          label-class="any"
          show-error
          :rules="userFormRules.okPassword"
        >
          <template #button>
            <span native-type="button" @click="isOKShow">
              <img
                v-if="passwordOKType == 'password'"
                src="~@/assets/svg/psdNo.svg"
              />
              <img v-else src="~@/assets/svg/psdYes.svg" />
            </span>
          </template>
        </van-field>
        <div>
          <van-button
            round
            block
            type="info"
            native-type="submit"
            color="linear-gradient(to right, #FA7D22, #FA461B)"
            class="btn"
            >立即注册</van-button
          >
        </div>
      </van-form>
    </div>
    <p class="foot">
      已有账户？<span @click="$router.push('/login')">立即登录</span>
    </p>
  </div>
</template>
<script>
import { register } from "@/api/user/index";
export default {
  data() {
    return {
      formData: {
        mobile: "",
        password: "",
        email: "",
        nameID: "",
        name: "",
        birthday: "",
        sex: "",
        touxiang:
          "https://zhongtai-1312798478.cos.ap-guangzhou.myqcloud.com/%E5%A4%B4%E5%83%8F.png",
      },
      userInfo: {},

      passwordType: "password", //输入框类型
      passwordOKType: "password", //输入框类型
      okPassword: "",

      userFormRules: {
        mobile: [
          {
            pattern: /^1[3|5|7|8]\d{9}$/,
            message: "请填写11位手机号码",
          },
        ],
        username: [
          {
            pattern: /^[a-zA-Z0-9]{6,16}$/,
            message: "格式不对",
          },
        ],
        password: [
          {
            pattern: /^[a-zA-Z0-9]{6,16}$/,
            message: "格式不对",
          },
        ],
        okPassword: [
          {
            pattern: /^[a-zA-Z0-9]{6,16}$/,
          },
          {
            validator: this.validator,
            message: "两次密码不一致",
            trigger: "onblur",
          },
        ],
      },
    };
  },
  methods: {
    validator(val) {
      if (val !== this.formData.password) {
        return false;
      }
    },
    async aaaa() {
      this.userInfo = await register(this.formData);
      if (this.userInfo !== {}) {
        this.$dialog
          .confirm({
            title: "注册成功",
            message: "点击跳转至登录页面",
          })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    isShow() {
      this.passwordType =
        this.passwordType === "password" ? "text" : "password";
    },
    isOKShow() {
      this.passwordOKType =
        this.passwordOKType === "password" ? "text" : "password";
    },
  },
};
</script>
<style scoped lang="less">
.text {
  width: 600px;

  border: 0.5px solid #dcbcbc;
  border-radius: 50px;
  margin-bottom: 32px;
}
  .btn {
    width: 600px;
    font-weight: 700;
    margin: 0 auto;
  }

/deep/.van-field__control {
  color: #5c5d60;
  font-weight: 400;
}
.biaodan {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login {
  .logo {
    background: url(../../assets/@3x.jpg);
    background-size: 100% 360px;
    background-repeat: no-repeat;
    text-align: center;
    img {
      margin-top: 186px;
      margin-bottom: 116px;
    }
  }
}
.foot {
  color: #5c5d60;
  font-size: 28px;
  font-weight: 700;
  margin-top: 197px;
  text-align: center;
  span {
    color: #ec5d29;
  }
}
.deng {
  color: #fff;
}
:deep(.any) {
  color: #5c5d60;
  font-weight: 600;
}
</style>
